<template>
  <div id="app">
    <!-- 1. 给真实dom绑定ref -->
    <h3 ref="h3Ref">App</h3>
    <!-- 2. 给组件绑定 -->
    <test-ref ref="comRef"/>
    <p><button @click="getRef">获取ref</button></p>
  </div>
</template>

<script>
import TestRef from './components/TestRef.vue'
/**
 *  ref 可以获取真实dom，获取类组件的实例
 *  React：
 *      绑定真实dom：  ref="字符串"   ref="(el)=>{}"   ref={this.ref对象}
 *      组件：
 *       1. 类组件： 直接获取类组件的实例对象
 *       2. 函数组件: 本身不支持ref属性，需要对函数组件进行 React.forwardRef(函数组件)
 *  Vue:
 *     1. 绑定： ref="字符串"，既可以给真实dom绑定，也可以给组件绑定
 *     2. 获取： this.$refs获取： 可以获取真实dom元素或组件实例对象
 *
 */
export default {
  name: 'App',
  components: {TestRef},
  methods: {
    getRef() {
        // 2. 获取真实dom 的 ref
        console.log('this.$refs: ',this.$refs)
        this.$refs.h3Ref.style.color = 'red'
        console.log('this.$refs.comRef',this.$refs.comRef)
    }
  },
}
</script>
    

<style>
</style>
